<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <!-- <el-form-item label="商品编码">
        <br> <br>
        <el-input v-model="formInline.goodsSeq" placeholder style="margin-left:-60px;width:200px"></el-input>
      </el-form-item> -->
      <el-form-item label="商品名称">
        <br> <br>
        <el-input v-model="formInline.goodsName" placeholder style="margin-left:-60px;width:200px"></el-input>
      </el-form-item>
      <div style="width:100%;display:flex;justify-content:flex-end;">
      <el-form-item>
        <el-button type="primary" @click="searchData()" size="mini" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">重置</el-button> 
        <el-button type="success" @click="addImportData()" size="mini" icon="el-icon-s-data">导入</el-button>
      </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%;margin-bottom: 20px;"
      row-key="goodsTypeId" border v-loading="loading" default-expand-all>
      <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
      <el-table-column align="center" prop="picUrl" label="商品图片" width="200">
                <template slot-scope="scope">
                    <img
                        :src="scope.row.picUrl"
                        v-if="scope.row.picUrl !='' && scope.row.picUrl !=null"
                        width="70" @click="$seeImage"
                        height="50"
                    />
                </template>
       </el-table-column>
      <el-table-column prop="goodsName" label="商品名称" min-width="200" align="left"></el-table-column>
      <el-table-column prop="unitName" label="商品规格" min-width="200" align="left"></el-table-column>
      <el-table-column prop="salePrice" label="会员价" min-width="200" align="right" :formatter="fixData"></el-table-column>
      <el-table-column label="操作" min-width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="deleteGoods(scope.row)" type="text">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.current"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--添加商品弹窗-->
        <el-dialog title="导入商品" :visible.sync="insertGoodsDialogVisible" width="60%">
            <div>
                <el-form :inline="true" :model="formInline2" class="demo-form-inline">
                    <el-row :span="24">
                        <el-col :span="24">
                            <el-form-item label="商品编码">
                                <el-input v-model="formInline2.goodsSeq" clearable placeholder style="width: 200px"></el-input>
                            </el-form-item>
                            <el-form-item label="商品名称">
                                <el-input v-model="formInline2.goodsName" clearable placeholder style="width: 200px"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="商品分类">
                                <el-select v-model="formInline2.goodsTypeId" clearable>
                                    <el-option v-for="(send, i) in typeData" :key="i" :value="send.goodsTypeId" :label="send.goodsTypeName"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item>
                                <el-button type="primary" @click="search2()" size="mini" icon="el-icon-search">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary"  @click="kong2()" size="mini" icon="el-icon-delete" >清空</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="table2">
                    <el-table
                        ref="table2"
                        tooltip-effect="dark"
                        style="width: 100%"
                        v-loading="loading2"
                        :data="chooseData"
                        @selection-change="handleSelectionChange"
                        border
                        :header-cell-style="{ background: '#eef1f6', color: '#606266',}">
                        <el-table-column type="selection"  width="60" align="center" fixed disabled></el-table-column>
                        <el-table-column prop="goodsSeq" label="商品编号" align="center" width="150" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="goodsName" label="商品名称" align="center"  show-overflow-tooltip></el-table-column>
                        <el-table-column prop="goodsTypeName" label="分类名称" align="center" width="150" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="unitName" label="计量单位" align="center" width="100"></el-table-column>
                        <el-table-column prop="memberPrice" label="会员价" align="right" :formatter="fixData"></el-table-column>
                        <el-table-column prop="salePrice" label="市场价格" align="right" :formatter="fixData"></el-table-column>
                        <el-table-column prop="goodsPic" label="图片" align="center" width="150">
                            <template slot-scope="scope">
                                <img :src="scope.row.goodsPic" v-if="scope.row.goodsPic != '' && scope.row.goodsPic != null"
                                    width="70" height="50"/>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style="margin-top: 22px; overflow: hidden">
                        <el-pagination
                            @size-change="handleSizeChange2"
                            @current-change="handleCurrentChange2"
                            :page-sizes="[5, 10, 20, 30, 50, 100, 150, 200]"
                            :current-page="listQuery2.current"
                            :page-size="listQuery2.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total2"></el-pagination>
                    </div>
                    <el-row>
                        <el-col :span="24"style="text-align: center; margin-top: 30px">
                            <el-button type="info" @click="closeGoodsDialog()" size="mini">取 消</el-button>
                            <el-button type="primary" @click="insertCustomizeGoods()"  size="mini">确定导入</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-dialog>

  </div>
</template>

<script>
import {
  queryGoodsCategorys
} from "@/api/warProductmanage";
import {
  // queryChooseGoodsList
} from "@/api/giftActivity";
  import {
    queryLiveGoodsInfoList,
    bulkImport,
    BatchDeleteInfos,
    queryChooseGoodsList,
  } from "@/api/liveStore";
  import qs from "qs";
  export default {
    data() {
      return {
        loading2: true,
        insertGoodsDialogVisible: false,
        chooseData: [],//表2数据
        total2: 0,
        batchSelGoods: [],//记录挑选多选商品id
        formInline2: {
        goodsName: "",
        goodsTypeId: "",
        goodsSeq: ""
      },//查询2
        listQuery2: {
        current: 1,
        size: 5
      },
      typeData: [],//商品类型
        tableData: [],
        listQuery: {
          current: 1,
          size: 10
        },
        formInline: {
          goodsName: "",
          goodsSeq: ""
        },
        loading: false,
        total: 0,
      };
    },
    mounted() {
      this.search();
      this.getProductType();//获取商品分类列表
    },
    methods: {
      fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        return cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },

      // 重置页码查询 查询
      searchData() {
        this.listQuery.current = 1;
        this.search();
      },
      //查询
      search() {
        this.loading = true;
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            goodsName: this.formInline.goodsName.trim(),
            goodsSeq: this.formInline.goodsSeq.trim()
          },
        };
        queryLiveGoodsInfoList(data).then(res => {
          this.total = res.total;
          this.tableData = res.records;
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.search();
      },
      handleSizeChange(val) {
        this.listQuery.size = val;
        this.search();
      },

      //新增
      addImportData() {
        this.queryChooseGoodsList();
        this.insertGoodsDialogVisible = true;
      },
      //关闭挑选商品弹窗
    closeGoodsDialog(){
      this.insertGoodsDialogVisible = false;
    },
      //挑选商品列表
    queryChooseGoodsList(){
      let data = {
        current: this.listQuery2.current,
        size: this.listQuery2.size,
        condition: {
          goodsName: this.formInline2.goodsName.trim(),
          goodsSeq: this.formInline2.goodsSeq.trim(),
          goodsTypeId: this.formInline2.goodsTypeId
        },
        ascs: [],
        descs: []
      };
      queryChooseGoodsList(data).then(res => {
        this.loading2 = false;
        this.chooseData = res.records;
        this.total2 = res.total;
      });
    },
    handleSizeChange2(val) {
      this.listQuery2.size = val;
      this.queryChooseGoodsList();
    },
    handleCurrentChange2(val) {
      this.listQuery2.current = val;
      this.queryChooseGoodsList();
    },
    //查询
    search2(){
      this.listQuery2.current = 1;
      this.queryChooseGoodsList();
    },
    //重置
    kong2(){
      this.formInline2.goodsName = "";
      this.formInline2.goodsSeq = "";
      this.formInline2.goodsTypeId = "";
    },
    //监听选择器
    handleSelectionChange(val) {
      this.batchSelGoods = val;
    },
    //添加商品
    insertCustomizeGoods(){
      if(this.batchSelGoods.length == 0){
         this.$message({
            showClose: true,
            message: "请先挑选导入的商品",
            type: "info"
          });
          return false;
      }
      var goodsList = [];
      for (let index = 0; index < this.batchSelGoods.length; index++) {
        let row = this.batchSelGoods[index];
        goodsList.push({goodsId:row.uuid,goodsName:row.goodsName,goodsSeq:row.goodsSeq,
        unitName:row.unitName,salePrice:row.memberPrice,goodsDescribe:row.goodsDescribe,
        picUrl:row.goodsPic});
      }
      let data = goodsList;
      bulkImport(data).then(res => {
        if(res.code == 1){
            this.$message({
            showClose: true,
            message: "操作成功",// message: res.message,
            type: "success"
          });
        }else{
          this.$message({
            showClose: true,
            message: "操作失败",//message: res.message,
            type: "error"
          });
        }
        this.queryChooseGoodsList();
        this.searchData();
        this.closeGoodsDialog();
      });
    },

      kong() {
        this.formInline.goodsName = "";
        this.formInline.goodsSeq = "";
        this.search();
      },
      //获取商品分类列表
    getProductType(v) {
      let data = {};
      queryGoodsCategorys(data).then(res => {
        this.typeData = res.records;
      });
    },

    deleteGoods(row) {
      var ids = [];
      this.$confirm("确定删除当前直播商品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ids.push(row.uuid);
          let data = ids
          BatchDeleteInfos(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });
              this.searchData();
            } else {
              this.$message.error("删除失败");
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },

    }
  };
</script>
<style>
.el-tooltip__popper {
  max-width: 800px;

}
</style>
<style lang="less" scoped>
  .el-form-item .el-select {
    width: 100%;
  }
</style>
